<template>
    <div class="outer">
        <div class="inner">
            <div class="head">订单支付</div>
            <div class="head_content">请仔细核对您要支付的订单</div>
            <div class="block_line"></div>
            <div class="title_and_price">
                <div class="title">
                    <span>{{data.id}}</span><span style="margin-left: 20px">{{data.title}}</span>
                </div>
                <div class="price">
                    <span>应付金额：</span> <span>{{data.price == null ? '免费' : '￥'+data.price}}</span>
                </div>
            </div>

            <div class="pay_block">
                <div class="qrcode" ref="qrCodeUrl"></div>
                <div class="wx_pay">微信支付</div>
            </div>

        </div>
    </div>
</template>

<script>
    import img from '@/assets/img/pay_blcok.png'
    import {ScriptWritingBQZRList} from "../../api/ScriptWriting";
    import {ScriptWritingDetail} from "../../api/ScriptWriting";
    import {TradeInfoAdd} from "../../api/TradeInfo";
    import QRCode from 'qrcodejs2'
    import {getUserInfo} from "../../utils/auth";
    import {AdaPaymentConfirm} from "../../api/dsp/pay";

    export default {
        name: "index",
        data() {
            return {
                img: img,
                data: {},
                id:undefined,
                worksCallupId:0,
            }
        },
        created() {

            this.worksCallupId=this.$route.query.worksCallupId

            ScriptWritingDetail({id:this.$route.query.id}).then(res=>{
                this.data=res.data
            })


            //一分钟之后跳转到订单页
            // setTimeout(()=>{
            //     this.$router.push('/my/trade')
            // },1000*60)

            AdaPaymentConfirm({id:this.$route.query.id}).then(res=>{
                console.log('请求结果为：',res)
            })

        },
        methods: {
            creatQrCode() {

               if(this.worksCallupId == undefined){
                   var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                       text: 'http://www.jubbart.com/Pay.html?id='+this.id+'&userId='+JSON.parse(getUserInfo()).id+'&worksCallupId=0', // 需要转换为二维码的内容
                       width: 100,
                       height: 100,
                       colorDark: '#000000',
                       colorLight: '#ffffff',
                       correctLevel: QRCode.CorrectLevel.H
                   })
               }else{
                   var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                       text: 'http://www.jubbart.com/Pay.html?id='+this.id+'&userId='+JSON.parse(getUserInfo()).id+'&worksCallupId='+this.worksCallupId, // 需要转换为二维码的内容
                       width: 100,
                       height: 100,
                       colorDark: '#000000',
                       colorLight: '#ffffff',
                       correctLevel: QRCode.CorrectLevel.H
                   })
               }
            },

            rollRequest(){

            },

        },

        mounted() {

            this.id=this.$route.query.id
            this.creatQrCode();

            // let timer=setInterval(()=>{
            //
            // },1000)
        }

    }
</script>

<style scoped lang="scss">
    .outer {
        width: 100%;
        overflow: hidden;
    }

    .inner {
        width: 700px;
        height: 524px;
        background: #FFFFFF;
        box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
        border-radius: 4px;

        margin: 0px auto;
        margin-top: 20px;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .head {
        font-size: 20px;
        line-height: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #111111;

        text-align: center;
        margin-top: 26px;
    }

    .head_content {
        font-size: 12px;
        line-height: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;

        text-align: center;
        margin-top: 8px;
    }

    .block_line {
        height: 1px;
        background: #E5E5E5;
        border-radius: 1px 1px 0px 0px;
        margin-top: 24px;
    }

    .title_and_price {
        width: 476px;
        margin: 0px auto;
        display: flex;
        justify-content: space-between;
        margin-top: 40px;
    }

    .title {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 14px;
    }

    .price > span:nth-of-type(1) {
        font-size: 14px;
        line-height: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
    }

    .price > span:nth-of-type(2) {
        font-size: 18px;
        line-height: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FF4444;
    }

    .pay_block {
        width: 476px;
        height: 253px;
        border: 1px solid #CCCCCC;
        margin: 0px auto;
        margin-top: 40px;
    }

    .qrcode{
        //width: 100px;
        //height: 100px;
        width: 40%;
        height: 70%;
        margin: 0px auto;
        //margin-top: 42px;
        margin-top: 22px;
        display: block;
        position:relative;
        background: red;
        /deep/img {
            display: block;
            width: 100%;
            height: 100%;
            background-color: #fff; //设置白色背景色
            padding: 6px; // 利用padding的特性，挤出白边
            box-sizing: border-box;
        }
    }
    .wx_pay{
        text-align: center;
        //margin-top: 26px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
    }


</style>
